<template>
  <div class="bodys"></div>
</template>

<script>
// 导入整个three.js核心库
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
export default {
  name: 'DemoOne',
  data() {
      return {
          // 页面标题
          title: 'ThreeJs演示页面一',
          // 场景
          scene: null,
          // 坐标辅助器
          axesHelper: null,
          // 相机
          camera: null,
          // WebGL渲染器
          renderer: null,
          // 轨道控制器
          control: null
      }
  },
  mounted() {
      // 加载场景
      this.init()
      // 动画渲染
      this.animat()
  },
  methods: {
      init() {
          // 1、创建一个场景
          this.scene = new THREE.Scene()

          // 2、创建场景物体
          // 创建一个立方缓冲几何体
          const geometry = new THREE.BoxGeometry(5, 5, 5)
          // 创建法线网格材质
          const material = new THREE.MeshNormalMaterial()
          // 创建网格
          const cube = new THREE.Mesh(geometry, material)
          // 添加到场景中
          this.scene.add(cube)

          // 3、创建坐标辅助器 - 模拟xyz坐标轴
          let axesHelper = new THREE.AxesHelper(70)
          // 添加到场景中
          this.scene.add(axesHelper)

          // 4、定义画布尺寸 - 高宽
          const width = window.innerWidth
          console.log('width', width)
          // 5、创建一个透视投影相机
          this.camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000)
          // 设置相机的位置
          this.camera.position.set(10, 10, 10)
          // 设置相机的观察点坐标
          this.camera.lookAt(0, 0, 0)

          // 6、创建一个WebGL渲染器 - 渲染你制作的场景
          this.renderer = new THREE.WebGLRenderer()
          // 设置渲染画布的尺寸
          this.renderer.setSize(width, height)
          // 把渲染结果添加到页面上
          document.body.appendChild(this.renderer.domElement)

          // 7、创建轨道控制器 - 方便操作场景物体
          this.control = new OrbitControls(this.camera, this.renderer.domElement)
      },
      animat() {
          // 渲染场景
          this.renderer.render(this.scene, this.camera)
          // requestAnimationFrame - 周期性执行，默认每秒60次
          // 渲染下一帧 - 再次执行渲染函数
          requestAnimationFrame(this.animat)
      }
  }
}
</script>

<style lang="scss" scoped>
.bodys {
  overflow: hidden;
}
</style>